---
title: {{titleCase component}}
description: Using the {{component}} machine in your project.
package: "@zag-js/{{component}}"
---

# {{titleCase component}}

...

<Resources pkg="@zag-js/{{component}}" />

<Showcase id="{{titleCase component}}" />

## Installation

To use the {{component}} machine in your project, run the following command in your
command line:

<CodeSnippet id="{{component}}/installation.mdx" />

This command will install the framework agnostic {{component}} logic and the
reactive utilities for your framework of choice.

## Anatomy

To set up the {{component}} correctly, you'll need to understand its anatomy and how
we name its parts.

> Each part includes a `data-part` attribute to help identify them in the DOM.

<Anatomy id="{{component}}" />

## Usage

First, import the {{component}} package into your project

```jsx
import * as {{component}} from "@zag-js/{{component}}"
```

The {{component}} package exports two key functions:

- `machine` — The state machine logic for the {{component}} widget.
- `connect` — The function that translates the machine's state to JSX attributes
  and event handlers.

> You'll also need to provide a unique `id` to the `useMachine` hook. This is
> used to ensure that every part has a unique identifier.

Next, import the required hooks and functions for your framework and use the
{{component}} machine in your project 🔥

<CodeSnippet id="{{component}}/usage.mdx" />

## Styling guide

Earlier, we mentioned that each {{component}} part has a `data-part` attribute added
to them to select and style them in the DOM.

```css
[data-scope="{{component}}"][data-part="root"] {
  /* styles for the root part */
}
```

## Methods and Properties

### Machine Context

The {{component}} machine exposes the following context properties:

<ContextTable name="{{component}}" />

### Machine API

The {{component}} `api` exposes the following methods:

<ApiTable name="{{component}}" />
